<template>
  <div>
    <div style="margin: 20px 0px">
 
 <!-- input -->
 <el-input
  placeholder="请输入内容"
  v-model="keyword"
  clearable
  style="width: 20%"
 >
 </el-input>
 
 <!-- 按钮 -->
 <el-button type="primary" @click="queryPage">搜索</el-button>
 <!-- 新增按钮 -->

</div>
<el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="userId" label="编码"> </el-table-column>
      <el-table-column prop="userName" label="名字"> </el-table-column>
      <el-table-column prop="code" label="身份证"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="job" label="职位"> </el-table-column>
      <el-table-column prop="status" label="通行码">
        <!-- scope表示为作用域  scope.row表示为作用域中这一行的数据 -->
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 0">绿码</el-tag>
          <el-tag type="warning" v-if="scope.row.status == 1">黄码</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 2">红码</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          
        </template>
      </el-table-column>
    </el-table>
    <!-- 定义一个分页标签 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
      :page-sizes="[4, 10, 20, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  <!-- 定义一个对话框 -->
  <el-dialog
      title="操作对话框"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        
        <el-form-item label="身份证">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option
              v-for="item in sex_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="form.job"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

//导入request工具
import request from "@/utils/request";
export default {
  data() {
    return {
      tableData: [],
      options: [],
      sex_options: [
        { id: "男", name: "男" },
        { id: "女", name: "女" },
      ],
      role_options: [
        { id: 0, name: "管理员" },
        { id: 1, name: "用户" },
        { id: 2, name: "医护" },
      ],
      form: {
        userId: "",
        name: "",
        phone: "",
        password: "",
        role: "",
        code: "",
        email: "",
        sex: "",
        age: "",
        job: "",
      },
      dialogVisible: false,
      total: 0,
      pageNum: 1, //当前页码
      pageSize: 10, //当前数量
      keyword: "",
    };
  },
  created() {
    this.queryPage();
    this.queryAll();
// //发起一个异步请求，查询分类的数据
// request.get("/vaccinum/list", {
//     params: {
//       pageNum: this.pageNum,
//       pageSize: this.pageSize
//     },
//   }).then((res) => {
//     console.log(res);
//     // 把后台的响应的数据赋值给data中的tableData
//     this.tableData = res.list;
//   });
  },
  methods: {
      // 查询所有的疫苗的分类信息
    queryAll() {
      request
        .get("/user-info/queryAll", {
          params: {},
        })
        .then((res) => {
          console.log(res);
          
          this.options = res.list;
        });

    },
    queryPage() {
    request.get("/user-info/list", {
      params: {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        keyword: this.keyword,
      },
    }).then((res) => {
      console.log(res);
      // 把后台的响应的数据赋值给data中的tableData
      this.tableData = res.list;
      this.total = res.total;
    });
  },
  showAddDialog(){
    
    this.form = {};
      this.dialogVisible = true;
     
  },
  // 插入数据
  save(){
    request
        // post 请求方式    提交的数据
        .post("/user-info/update", this.form)
        // then表示请求后的回调函数
        .then((res) => {
          //判断操作是否成功
          if (res.ok == true) {
            //重新查询数据
            this.queryPage();
            //消息提示
            this.$message({
              message: "更新成功",
              type: "success",
            });
            //关闭对话框
            this.dialogVisible = false;
          } else {
            this.$message.error("更新失败");
          }
        });
  },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
     // 更改每页的记录数
     handleSizeChange(val) {
    // 更新数据
    this.pageSize = val;
    // 查询
    this.queryPage();
    console.log(`Size每页 ${val} 条`);
  },
  // 更改页码（当前页）
  handleCurrentChange(val) {
    // 更新数据
    this.pageNum = val;
    // 查询
    this.queryPage();
    console.log(`Current当前页: ${val}`);
  },
    // 对话框关闭前的弹窗
    handleClose(done) {
    this.$confirm("确认关闭？")
      .then((_) => {
        done();
      })
      .catch((_) => { });
  },

  handleEdit(row) {
    console.log(row);
    this.form.userId = row.userId
    this.form.code = row.code
    this.form.email = row.email
    this.form.sex = row.sex
    this.form.age = row.age
    this.form.job = row.job
    this.dialogVisible = true
    

  },
  handleDelete(row) {
    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        console.log(row.name);
        // 调用删除接口
        request.get("/user-info/delete",{
          params: {
          user_id: row.user_id
          }
          }).then((res)=>{
            // 判断是否删除成功
          if(res.ok == true){
            this.queryPage();
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          }else{
            this.$message({
            type: 'info',
            message: '删除失败'
          });  
          }
          })
      }).catch((res) => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });       
      });
    console.log(row.id);
  },
  },

};
</script>